/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
import { Layout, Button, Icon, Form, Input, Cascader, Select, AutoComplete, Checkbox } from 'antd';
import { connect } from 'dva';
import styled from 'styled-components';
import { addressOptions } from './constants';
const { Content } = Layout;
const FormItem = Form.Item;

class Login extends React.Component {
  render() {
    return (
      <Layout>
        <Content>
          <LoginForm />
        </Content>
      </Layout>
    )
  }
}
// 登入表单
@Form.create()
class LoginForm extends React.Component{
  state = {
    autoCompleteResult: [],
    confirmDirty: false,
  }
  // 输入网址
  handleWebsiteChange = (value) => {
    if (value) {
     // eslint-disable-next-line react/no-direct-mutation-state
     this.state.autoCompleteResult = ['.com', '.cn', '.org'].map(domain => value + domain);
    } else {
      // eslint-disable-next-line react/no-direct-mutation-state
      this.state.autoCompleteResult = []
    }
    this.setState({autoCompleteResult: this.state.autoCompleteResult});
  }
  // 输入密码失去焦点
  handleRePasswordBlur = (e) => {
    this.setState({ confirmDirty: this.state.confirmDirty || e.target.value });
  }

  // 自定义的效验的方法
  comparePassword = (rule, value, callback) => {
  // 取值
  const password = this.props.form.getFieldValue('password');
    if (value === password) {
      callback();
    } else {
      callback('密码和确认密码不一致');
    }
  }
  // 验证密码
  validateToRepassword = (rule, value, callback) => {
   this.state.confirmDirty && this.props.form.validateFields(['repassword',{force: true}])
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 20,
      }
    }
    
    const formItemAgreeLayout = {
      wrapperCol: {
        span: 20,
        offset: 4
      }
    }

    const countrySelector = getFieldDecorator('prefix', {
      initialValue: '086',
    })(<Select>
        <Select.Option value="086">086</Select.Option>
        <Select.Option value="087">086</Select.Option>
      </Select>
    )
      // 网址选项
    const websiteOptions = this.state.autoCompleteResult.map(options => {
      return <AutoComplete.Option key={options}>{options}</AutoComplete.Option>
    });
    return (
      <FormWrapper>
        <Form style={{ width: '500px' }}>
          <h3>欢迎注册</h3>
          <FormItem label="用户名" {...formItemLayout}>
            {
              getFieldDecorator('username',{
                rules: [{ required: true, message: '请输入用户名' }]
              })(<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,25)' }}></Icon>} />)
            }
          </FormItem>
          <FormItem label="密码" {...formItemLayout}>
          {
              getFieldDecorator('password',{
                rules: [{ required: true, message: '请输入密码' }, {
                  validator: this.validateToRepassword
                }]
              })(<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,25)' }}></Icon>} />)
            }
          </FormItem>
          <FormItem label="确认密码" {...formItemLayout}>
          {
              getFieldDecorator('repassword',{
                rules: [{ required: true, message: '请输入确认密码' }, 
              {
                validator: this.comparePassword
              }]
              })(<Input onBlur={this.handleRePasswordBlur} prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,25)' }}></Icon>} />)
            }
          </FormItem>
          <FormItem label="邮箱" {...formItemLayout}>
          {
              getFieldDecorator('email',{
                rules: [{ required: true, message: '请输入邮箱' },{ email: true, message: '邮箱是否合法' }]
              })(<Input prefix={<Icon type="mail" style={{ color: 'rgba(0,0,0,25)' }}></Icon>} />)
            }
          </FormItem>
          <FormItem label="住址" {...formItemLayout}>
          {
              getFieldDecorator('address',{
                rules: [{ required: true, message: '请输入住址', type: 'array' }]
              })(<Cascader options={addressOptions} placeholder="Please select" />)
            }
          </FormItem>
          <FormItem label="手机号" {...formItemLayout}>
          {
              getFieldDecorator('phone',{
                rules: [{ required: true, message: '请输入手机号' },{ phone: true, message: '邮箱是否合法' }]
              })(<Input addonBefore={ countrySelector } style={{ width: '100%' }} />)
            }
          </FormItem>
          <FormItem label="个人主页" {...formItemLayout}>
          {
              getFieldDecorator('websit',{
                rules: [{ required: true, message: '请输入个人主页' }]
              })(<AutoComplete
                dataSource={websiteOptions}
                onChange={this.handleWebsiteChange}
                placeholder="请输入网址"
                 >
                <Input />
              </AutoComplete>)
            }
          </FormItem>

          <FormItem {...formItemAgreeLayout}>
          {
              getFieldDecorator('aggrement', {
                valuePropName: 'checked'
              // eslint-disable-next-line jsx-a11y/anchor-is-valid
              })(<Checkbox>我已经同意并阅读<a href="#">协议</a>地址</Checkbox>)
            }
          </FormItem>

          <FormItem>
            <Button type="primary" htmlType="submit" style={{ width: '100%' }}>注册</Button>
            已有账号？<a href="#" onClick={this.props.changeLoginStatus}>立刻登录</a>
          </FormItem>
        </Form>
      </FormWrapper>
    )
  }
}

const FormWrapper = styled.div`
  display: flex;
  justify-content:center;
  align-items: center;
  height:calc(100vh);
  h3 {
    text-align: center;
  }
  form {
    border:1px solid #999;
    border-radius: 5px;
    padding: 20px;
  }
`

export default connect(
  state => state
)(Login);